<template>
  <van-nav-bar
    title="我的订单"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.back('/');
      }
    "
  />
  <van-search
    v-model="value"
    shape="round"
    placeholder="请输入搜索关键词"
    @click="sou"
  />
  <van-tabs v-model:active="active">
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <van-tab title="全部">
        <van-swipe-cell>
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            class="goods-card"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            class="goods-card"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            class="goods-card"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            class="goods-card"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-tab>
      <van-tab title="待付款">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          class="goods-card"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          class="goods-card"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </van-tab>
      <van-tab title="待收货">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          class="goods-card"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          class="goods-card"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </van-tab>
      <van-tab title="已完成">
        <van-empty description="暂无完成的订单" />
      </van-tab>
    </van-pull-refresh>
  </van-tabs>
</template>

<script setup>

import { ref } from "vue";
import { useRouter } from "vue-router";
let router = new useRouter();
let sou = () => {
  router.push("/sousuo");
};
import { showToast } from 'vant';
const count = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
</script>

<style lang="scss" scoped></style>